<template>
  <div class="carousel-container">
    <el-carousel :interval="2000" arrow="always" height="70vh">
      <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
        <div class="carousel-item-wrapper">
          <img class="rotation_img" :src="item.image" alt="slide">
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup lang="ts">
// 图片引入（被注释掉的图片引入语句）
// import pic1 from "@/assets/images/sport1.jpg";
import pic2 from "@/assets/images/rotationpic1.png";
import pic3 from "@/assets/images/rotationpic2.png";
import pic4 from "@/assets/images/rotationpic3.png";

// 导入Vue中所需的函数和模块
import { onMounted, onUnmounted, ref } from 'vue';

// 导入全局状态变量
import { pageStyleInfoStore } from '@/stores/info/index' // 页面状态获取，全局变量

// 访问全局状态变量
const appStore = pageStyleInfoStore();

// 处理滚动事件的函数
const handleScroll = (_event: any) => {
  // // 判断滚动方向
  // const scrollDirection = event.deltaY > 0 ? 'down' : 'up';
  // // 获取滚动条位置
  // const scrollTop = window.scrollY || document.documentElement.scrollTop;

  // 获取轮播图容器元素
  const carouselContainer = document.querySelector('.carousel-container') as HTMLElement;
  const rotationPicHeight = ref<number>();

  // 获取轮播图容器的高度
  if (carouselContainer) {
    rotationPicHeight.value = carouselContainer.offsetHeight;
    // 设置全局变量中的高度值
    appStore.setHeight(rotationPicHeight.value)
  }

};

// 在组件挂载后执行的生命周期钩子，添加滚轮事件监听器
onMounted(() => {
  window.addEventListener('wheel', handleScroll);
});

// 在组件卸载前执行的生命周期钩子，移除滚轮事件监听器
onUnmounted(() => {
  window.removeEventListener('wheel', handleScroll);
});

// 轮播图的图片数据数组
const carouselItems = [
  // { image: pic1 },
  { image: pic2 },
  { image: pic3 },
  { image: pic4 },
];

</script>

<style scoped>
img {
  width: 100%;
  height: 80vh;
}

.carousel-container {
  position: relative;
  z-index: 4;
}

.carousel-item-wrapper {
  position: relative;
}

.rotation_img {
  width: 100%;
  height: 70vh;
}

/* 渐变遮罩样式 */
.carousel-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(62,150, 225, 0.7), rgba(62,150, 225, 0));
  z-index: 5;
}
</style>
